<!DOCTYPE html>
<!--    使用 Thymeleaf 模版引擎   -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>JackLin的博客</title>

    <!--    标签栏图标   -->
    <link rel="shortcut icon" href="/image/logo.png" type="image/x-icon">

    <!--    引入样式文件 -》 富文本编辑器 -->
    <link rel="stylesheet" th:href="@{/editor.md-master/css/editormd.css}">
    <link rel="stylesheet" th:href="@{/editor.md-master/css/editormd.preview.css}">
    <!--    引入css 样式文件 -》 标签选择 -->
    <link rel="stylesheet" type="text/css" href="http://apps.bdimg.com/libs/bootstrap/2.3.2/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">
    <link rel="stylesheet" th:href="@{/css/choosetag/selectpage.css}">
    <link rel="stylesheet" th:href="@{/css/choosetag/demo.css}">
    <!--    引入 css 样式文件 -》 开关按钮-->
    <link rel="stylesheet" th:href="@{/css/choosebtn/choosebtn.css}">

    <!--    不需要 ${pageContext.request.contextPath}  -->
    <!--    引入 js 文件 -》 富文本编辑器   -->
    <script th:src="@{/js/jquery-3.4.1.js}"></script>
    <script th:src="@{/editor.md-master/lib/marked.min.js}"></script>
    <script th:src="@{/editor.md-master/lib/prettify.min.js}"></script>
    <script th:src="@{/editor.md-master/lib/raphael.min.js}"></script>
    <script th:src="@{/editor.md-master/lib/underscore.min.js}"></script>
    <script th:src="@{/editor.md-master/lib/sequence-diagram.min.js}"></script>
    <script th:src="@{/editor.md-master/lib/flowchart.min.js}"></script>
    <script th:src="@{/editor.md-master/lib/jquery.flowchart.min.js}"></script>
    <script th:src="@{/editor.md-master/editormd.min.js}"></script>


    <style>

        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #f3f3f3;
        }

        #title-first {
            text-align: center;
            margin-top: 8px;
        }

        #title-first #span-title {
            font-size: 20px;
            font-weight: 600;
        }

        #title-first #article-title {
            width: 800px;
            height: 45px;
            border-radius: 5px;
            border: 1px solid #cccccc;
            line-height: 45px;
            font-size: 24px;
        }

        #title-first #showHTML img {
            height: 170px;
        }

        /*  返回  */
        #title-first #return-back {
            display: inline-block;
            width: 90px;
            height: 40px;
            border: 1px solid #CCCCCC;
            text-align: center;
            line-height: 40px;
            cursor: pointer;
        }

        #title-second {
            text-align: center;
            margin-top: 8px;
            margin-bottom: 8px;
        }

        #title-second .customize {
            display: inline-block;
            width: 110px;
            height: 35px;
            margin-top: 10px;
            margin-bottom: 10px;
        }

        #my-editormd {
            margin-top: 5px;
        }

        #temp-save {
            display: inline-block;
            width: 90px;
            height: 40px;
            border: 1px solid #CCCCCC;
            text-align: center;
            line-height: 40px;
            cursor: pointer;
        }

        #push-article {
            display: inline-block;
            width: 90px;
            height: 40px;
            border: 1px solid #CCCCCC;
            text-align: center;
            line-height: 40px;
            cursor: pointer;

        }

        /*  是否原创，是否开启评论*/
        .my_option {
            width: 800px;
            margin: 15px auto;
        }

        .my_comment {
            height: 36px;
            display: inline-block;

        }

        .my_original {
            height: 36px;
            display: inline-block;

        }


        #span-comment {
            float: left;
        }

        #span-comment {
            float: left;
        }

        /*  标签选择部分  */
        .heading {
            line-height: 40px;
        }

        .heading span {
            display: inline-block;
            float: left;
        }

        #blog-type {
            display: inline-block;
        }


    </style>

</head>
<body>


<form th:action="@{/admin/updateBlog}" method="post" id="my-form">

    <!--    文章标题-->
    <div id="title-first">
        <span id="span-title">文章标题：</span>
        <!--    由于是更新操作，所以得传入博客的 id     -->
        <input type="text" name="bid" id="bid" th:value="${blog.getBid()}" style="display: none">
        <!--    注意：form表单里面的 input 标签里面显示的值是放在 value 属性里面的  -->
        <input id="article-title" type="text" name="title" th:value="${blog.getBtitle()}">
        <div id="temp-save">保存修改</div>
        <div id="push-article">发布文章</div>
        <div id="return-back">
            <a th:href="@{/admin/Blog}">返回</a>
        </div>
    </div>
    <!--    是否开启评论  -->
    <div class="my_option">
        <span id="span-comment">是否开启评论：</span>
        <div class="button r mybtn my_comment">
            <!--  checked == true -> 显示NO  ;   checked == false  -> 显示 YES -->
            <input type="checkbox" class="my_checkbox comment_checkbox"
                   th:checked="${blog.getCommentabled()} == 1 ? false : true">
            <div class="knobs"><span></span></div>
            <div class="layer"></div>
        </div>
    </div>
    <!--    是否原创-->
    <div class="my_option">
        <span>是否原创：</span>
        <div class="button r mybtn my_original">
            <!--  checked == true -> 显示NO  ;   checked == false  -> 显示 YES -->
            <input type="checkbox" class="my_checkbox original_checkbox"
                   th:checked="${blog.getOriginal()} == 1 ? false : true">
            <div class="knobs"><span></span></div>
            <div class="layer"></div>
        </div>
    </div>
    <!--    分类  -->
    <div class="my_option">
        请选择分类：
        <select id="my-type">
            <option value="分类" style="display:none">请选择分类</option>
            <!--    利用三目运算符更快捷，虽然 IDEA 会报红，但是依旧可以正常运行，不影响 -->
            <option th:value="${type.getTypename()}" th:each="type,typeState:${types}"
                    th:text="${type.getTypename()}"
                    th:selected="${type.getTypeid()} == ${blog.getBlogtypeid()} ? true : false"></option>
        </select>
    </div>

    <!--    标签  -->
    <div class="row-fluid my_option">
        <h4 class="heading">
            <span>请选择博客的标签（待完善，对应标签在右侧列表中，请手动在下面添加）</span>
            <select id="blog-type">
                <option value="分类" style="display:none">博客标签列表</option>
                <!--    利用三目运算符更快捷，虽然 IDEA 会报红，但是依旧可以正常运行，不影响 -->
                <option th:value="${selectedTag.getTagname()}" th:each="selectedTag,selectedTagState:${selectedTags}"
                        th:text="${selectedTag.getTagname()}"></option>
            </select>
        </h4>
        <input type="text" id="selectPage4" class="input-block-level" placeholder="请输入查询关键字">

    </div>

    <!--    Markdown操作按钮-->
    <div id="title-second">
        <button type="button" id="watch-btn" class="customize">显示在线预览</button>
        <button type="button" id="unwatch-btn" class="customize">隐藏在线预览</button>
        <button type="button" id="preview-btn" class="customize">预览HTML</button>
        <button type="button" id="show-toolbar-btn" class="customize">显示工具栏</button>
        <button type="button" id="close-toolbar-btn" class="customize">隐藏工具栏</button>
    </div>

    <!--     Markdown 编辑器展示区    -->
    <!--  id 对应着 editormd 里面的id  -->
    <div id="my-editormd">
        <textarea name="my-editormd-markdown-doc" id="my-editormd-markdown-doc" style="display: none"
                  th:text="${blog.getBcontent()}"></textarea>
        <!--   注意 name 属性的值，，应该跟着div的IDmy-editormd值来定，即$-html-code（刚开始，后端死活获取不到值，翻看了源码才知道）-->
        <textarea name="my-editormd-html-code" id="my-editormd-html-code"></textarea>
    </div>

    <!--写一个隐藏的div,存放需要初始化的内容,用作假设后台传回的数据演示-->
    <div id="editor-data" style="display:none;" th:text="${blog.getBcontent()}"></div>


</form>
<br>


<!--    注意，这里引入的 JQuery 版本是 1.10.2  -->
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<!--    引入 js 文件(注意引入的顺序) -》 标签选择-->
<script th:src="@{/js/choosetag/selectpage.js}"></script>
<script th:src="@{/js/choosetag/b.selectpage.js}"></script>


<script>
    var editor;     // 表示富文本编辑器的变量

    $(function () {

        /**
         *      标题输入框失去焦点时，发送 Ajax 请求判断是否重复
         * */
        $("#article-title").blur(function () {
            // 1. 构造标题对应的对象
            var titleObj = {
                "title": $("#article-title").val(),
                // 因为这里是编辑博客时判断标题是否重复，所以得传入当前博客辅助判断
                "bid": $("#bid").val()
            };

            // 新增博客时检查标题是否合法
            $.ajax("/admin/checkTitleEditBlog", {
                type: "GET",
                data: titleObj,
                dataType: "text",
                traditional: true,
                success: function (data, status) {
                    if (data === 'YES') {
                        // 标题合法
                    } else {
                        alert("标题重复，请重新输入！！！");
                        // 同时清空输入框
                        $('#article-title').val("");
                    }

                }
            })
        });

        // 开关按钮 ( 由于是编辑博客，所以需要从后台数据中获取数据并赋予初始值  ) -> 注意，要利用 prop 获取
        var ifComment = $(".comment_checkbox").prop("checked");      // 是否开启评论 (初次获取的值为 true 或者 false，还有转换为1或者0)
        ifComment = ifComment ? 0 : 1;      // 将 true或者false转换成为1或者0  -》 注意对应关系，结合插件来判断，false 对应 1
        $('.my_comment').click(function () {
            if (ifComment === 1) {
                ifComment = 0;
            } else {
                ifComment = 1;
            }
        });

        var original = $('.original_checkbox').prop("checked");       // 是否原创，
        original = original ? 0 : 1;        // 将 true 或者 false 转换成为1或者0  -》 注意对应关系，结合插件来判断，false 对应 1
        $('.my_original').click(function () {
            if (original === 1) {
                original = 0;
                console.log('change');
            } else {
                original = 1;
            }
        });


        // 标签选择
        var resultData;
        // 首先发送一个 Ajax 请求，获取所有标签，为标签选择做准备（返回的是一个JSON数组）
        $.ajax("/admin/Blog/GetTags", {
            type: 'POST',
            dataType: 'JSON',
            async: false,     // 设置为同步
            success: function (data) {
                resultData = data;
            }
        });
        $('#selectPage4').bSelectPage({
            showField: 'tagname',
            keyField: 'tagid',
            data: resultData,
            multiple: true,
            callback: function (data) {
                // 原理：每次点击之后，就会生成一个 ul>li 标签，类名为 selected_tag
                var tags = $('.selected_tag');
                console.log(tags);
                for (var i = 0; i < tags.length; i++) {
                    tags[0].childNodes[0].nodeValue;
                }
            }
        });

        /*  Markdown 编辑器初始化开始   */
        // 注意：这里就是下面的 div 属性里面的 id 的值
        editor = editormd("my-editormd", {
            width: "80%",            //宽度，不填为100%
            height: "600",           //高度，不填为100%
            path: "../editor.md-master/lib/",   //editor.md插件的lib目录地址
            theme: "dark",             //工具栏使用dark主题,不写用默认主题：白色
            // previewTheme : "dark",			//预览区使用dark主题,默认白色
            // editorTheme : "pastel-on-dark", //编辑预览区使用dark主题,默认白色
            // markdown : $('#dateDemo').html(),				//这个参数是请求后台返回的数据,为了方便演示就写死吧,不从后台取了
            // codeFold : true,
            //syncScrolling : false,
            saveHTMLToTextarea: true, // 保存 HTML 到 Textarea  方便 post 提交
            toolbarAutoFixed: true,      //工具栏自动固定定位的开启与禁用
            imageUpload: true,
            imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            // 对应上传到服务器的地址（上传图片太大可能会上传失败）
            // imageUploadURL: "http://localhost:8080/myblog_war_exploded/upload"
            imageUploadURL: "/uploadQNY"

        });
        /*  Markdown 编辑器初始化结束   */


        // 保存修改，暂时保存，不发布     -》 发送 Ajax 请求
        $('#temp-save').click(function () {
            alert("暂存成功！");
            // 首先检查标题和标签是否填写
            var tags = $('.selected_tag');    // 原理：每次点击之后，就会生成一个 ul>li 标签，类名为 selected_tag
            if (tags.length === 0) {
                alert("请填写标签！！！");
                return;
            }
            if ($('#article-title').val() === '') {
                alert("请填写标题！！！");
                return;
            }

            var tagNames = [];      // 获得标签名称数组，发送 Ajax 请求时传递的参数
            for (var i = 0; i < tags.length; i++) {
                tagNames[i] = tags[i].childNodes[0].nodeValue;
            }

            // 构建 JSON 对象
            var dataObj = {
                "title": $('#article-title').val(),
                "blogid": $("#bid").val(),     // 在编辑博客界面是，id已经存在,直接获取值即可
                "my-editormd-markdown-doc": $("#my-editormd-markdown-doc").text(),
                "type": $('#my-type').val(),
                // 下面2个变量在前面已经定义过了
                "original": original + '',      // 字符串类型
                "ifComment": ifComment + '',    // 字符串类型
                "tag": tagNames, // 标签名称
                "published": '0',   // 注意，是字符串类型的，0表示暂存而不发布
            };
            $.ajax("/admin/updateBlog", {
                type: "POST",
                data: dataObj,      // 注意：这里传递的是一个 json 对象，后端需要利用 @RequestParam 注解
                dataType: "text",       // 返回的类型为纯文本字符串类型
                traditional: true,
                success: function (data, status) {
                    console.log("data = " + data);
                    alert("暂存成功！");
                }
            });

        });
        // 发布文章，提交 from 表单
        $('#push-article').click(function () {
            var myForm = $('#my-form');
            var tags = $('.selected_tag');
            // 首先检查标题和标签是否填写
            if (tags.length === 0) {
                alert("请填写标签！！！");
                return;
            }
            if ($('#article-title').val() === '') {
                alert("请填写标题！！！");
                return;
            }

            for (var i = 0; i < tags.length; i++) {
                console.log('选中的标签为：', tags[i].childNodes[0].nodeValue);
                myForm.append('<input type="text" name="tag" value="' + tags[i].childNodes[0].nodeValue + '">');

            }

            myForm.append('<input type="text" name="type" value="' + $('#my-type').val() + '">');
            myForm.append('<input type="text" name="original" value="' + original + '">');
            myForm.append('<input type="text" name="ifComment" value="' + ifComment + '">');
            /*  展示保存博客，不发布，设置为 flag,由外部传参   */
            myForm.append('<input type="text" name="published" value="' + 1 + '">');

            myForm.submit();
        });

        // 将 md 转换为 html 开始
        $('#btn').click(function () {
            console.log(666);
            // 获得需要展示的 Markdown 格式文件内容
            var content = editor.getValue();
            console.log("content = " + content);
            // 首先要将 Markdown 格式文本放入 textarea 标签中，然后在进行转换
            $('#appendText').val(content);

            // 转换开始,主要 showHTML 是需要输出 HTML 的标签的 id
            editormd.markdownToHTML("showHTML", {
                htmlDecode: "style,script,iframe", //可以过滤标签解码
                emoji: true,
                taskList: true,
                tex: true,               // 默认不解析
                flowChart: true,         // 默认不解析
                sequenceDiagram: true,  // 默认不解析
            })

        });
        // 将 md 转换为 html 结束


        /*  自定义功能区  */
        //显示在线预览
        $("#watch-btn").click(function () {
            editor.watch();
        });

        //隐藏在线预览
        $("#unwatch-btn").click(function () {
            editor.unwatch();
        });

        //预览HTML（按Shift + ESC取消）
        $("#preview-btn").bind('click', function () {
            editor.previewing();
        });

        //显示工具栏
        $("#show-toolbar-btn").bind('click', function () {
            editor.showToolbar();
        });

        //隐藏工具栏
        $("#close-toolbar-btn").bind('click', function () {
            editor.hideToolbar();
        });


    });
</script>


</body>
</html>